<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions" class="mySwiper">
      <swiper-slide class="slode">Slide 1</swiper-slide>
      <swiper-slide  class="slode">Slide 2</swiper-slide>
      <swiper-slide  class="slode">Slide 3</swiper-slide>
      <swiper-slide  class="slode">Slide 4</swiper-slide>
      <swiper-slide  class="slode">Slide 5</swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="swiper-button-prev prev"></div>
    <div class="swiper-button-next next"></div>
  </div>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        //  swiper 的配置项
        swiperOptions: {
          //  循环 播放
          loop: true,
          //  自动播放
          autoplay: {
            delay: 3000, //时间
            stopOnLastSlide: false,
            disableOnInteraction: false, // 点击小圆点后图片还可以自动播放
          },
          // 小圆点
          pagination: {
            el: '.swiper-pagination', // 显示小圆点
            clickable: true, //可以点击小圆点
          },

          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper);
      this.swiper.slideTo(1, 1000, true);
      // this.$refs.mySwiper.$swiper.slideTo(3, 1000, false);
    },
  };
</script>
<style lang="less" scoped>
  @import url('../state/carousel/carousel.less');
</style>
